<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="../libs/css/animate.css">
    <style>

        tr td{
            border:1px solid #ddd;  
        }
        table td{
                border:1px solid #333;
        }
        table{
            width:50%;
            background: orange;
        }
    
        td{
            padding:20px;
            text-align: center;
        }
    
        ul{
            display: flex;
            padding:10px;
            background: pink;
            width:70%;
        }
        li{
            margin:0 10px;
            flex:1;
            padding:20px;
        }
        .sldie-enter-active{
            animation: zoomInDown 1s both;
        }

        .sldie-leave-active{
            animation: zoomOutDown 0.3s both;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <p><input type="text" v-model="msg" ></p>
        <myhead></myhead>
        <select v-model="cname">
            <option value="ctable">表格展示</option>
            <option value="clist">列表展示</option>
        </select>
        <hr>

        <!-- 失活的组件将会被缓存 -->
        
        <keep-alive>    
            <transition name="sldie" mode="out-in">
                <component :is="cname" :cars="cars"></component>
            </transition>
        </keep-alive>
        

        <!-- <button @click="flag=true">表格展示</button> -->
        <!-- <button @click="flag=!flag">{{flag?'列表':'表格'}}展示</button>
        <ctable v-show="flag" :cars="cars" ></ctable>
        <clist v-show="!flag" :cars="cars"></clist> -->
    </div>
    <template id="ctable">
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>品牌</td>
                    <td>型号</td>
                    <td>颜色</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(car,key,index) in cars" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{car.brand}}</td>
                    <td>{{car.model}}</td>
                    <td>{{car.color }}</td>
                </tr>
            </tbody>
        </table>
    </template>
    <template id="clist">
        <ul>
            <li v-for="(car,key,index) in  cars" :key="index">
                <p>序号: {{index+1}}</p>
                <p>品牌: {{car.brand}}</p>
                <p>型号: {{car.model}}</p>
                <p>颜色: {{car.color}}</p>
            </li>
        </ul>
    </template>
    <script>
        
        Vue.component("myhead",{
            template:"<header>wh2107 - 天道酬勤 </header>"
        })
        var cars = {
            car01 : {brand : "Ford", model : "Mustang", color : "red"},
            car02 : {brand : "Fiat", model : "500", color : "white"} ,
            car03 : {brand : "Volvo", model : "XC90", color : "black"}
        }

        Vue.component("ctable",{
            template:"#ctable",
            props:{
                cars:Object 
            },
            mounted(){
                console.log(2107)
            },
            activated(){
                console.log("组件激活了... ")
            },
            deactivated(){
                console.log("组件失活了...")
            }
        })
        Vue.component("clist",{
            template:"#clist",
            props:['cars']
        })

        const vm = new Vue({
            data:{
                msg:"动态组件切换",
                flag:true ,
                cars,
                cname:"ctable"
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.msg 
            }
        }).$mount("#app")
    </script>
        
       <!-- 
        component 官方组件
        is 属性   表示当前显示的组件 组件名称
        keep-alive   失活的组件将会被缓存！   下一次失活组件重新激活的时候 会直接调用缓存数据  性能优化

        activated   激活
        deactivated 失活  

        transition 过渡组件 

        组件切换
        1. v-if
        2. v-show 
        3. component
        4. 路由 route 
     -->

 
</body>
</html>